/**
 * Created by 2019/3/11/011
 * Author: Admin
 */
import React, {Component} from 'react';
import "./index.css";
import {
    Form, Select, InputNumber, Switch, Radio,
    Slider, Button, Upload, Icon, Rate, Checkbox,
    Row, Col, Input, TimePicker ,DatePicker
} from 'antd';

import moment from 'moment';
//引入国际化设置（中文）
import locale from 'antd/es/date-picker/locale/zh_CN';

const { MonthPicker, RangePicker, WeekPicker } = DatePicker;

class Detail extends Component {
    constructor(props, context) {
        super(props, context)
        console.log(props)
        this.userList = props.location.state.data
        this.state = {
            value: "",
            time: "",
            date: "",
            radioVal: "",
        }
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };
    onChangeValue = (e) =>{
        console.log(e)
        this.setState({
            value:e.target.value
        })
    };
    onChangeTime  = (time,timeString) => {
        this.setState({
            time:time
        })
    }
    onChangeDate = (date) =>{
        this.setState({
            date:date
        })
    }
    onRadioChange=(e)=>{
        console.log('radio checked', e.target.value);
        this.setState({
            radioVal: e.target.value,
        });
    }

    render() {
        // const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {span: 1},
            wrapperCol: {span: 14},
        };
        const { value } = this.state;
        const dateFormat = 'YYYY-MM-DD';
        const format = "HH:mm:ss";
        return (
            <div>
                <Row>
                    <Col span={8}>
                        <Row>
                            <Col  style={{textAlign: "center"}}><p>详情展示区域</p></Col>
                        </Row>
                        <Row className="row-item">
                            <Col span={8} className="row-item_label">ID</Col>
                            <Col span={16}><Input placeholder="ID" disabled value={this.userList.id} style={{width: 200}}/></Col>
                        </Row>
                        <Row className="row-item">
                            <Col span={8}>姓名</Col>
                            <Col span={16}><Input placeholder="姓名" value={this.userList.name} style={{width: 200}} /></Col>
                        </Row>
                        <Row className="row-item">
                            <Col span={8}>年龄</Col>
                            <Col span={16}><Input placeholder="年龄" disabled value={this.userList.age}
                                                 style={{width: 200}}/></Col>
                        </Row>

                        <button onClick={() => this.props.history.goBack()}>返回</button>
                    </Col>
                    <Col span={8}>
                        <Row>
                            <Col  style={{textAlign: "center"}}><p>编辑区域</p></Col>
                        </Row>
                        <Row className="row-item">
                            <Col span={8}>测试输入</Col>
                            <Col span={16}><Input placeholder="param" value={value} onChange={this.onChangeValue} style={{width: 200}} /></Col>
                        </Row>
                        <Row className="row-item">
                            <Col span={8}>时间选择</Col>
                            <Col span={16}>
                                <TimePicker placeholder="请选择时间" defaultValue={moment(new Date(), format)} format={format}  onChange={this.onChangeTime} style={{width: 200}} />
                            </Col>
                        </Row>
                        <Row className="row-item">
                            <Col span={8}>日期选择</Col>
                            <Col span={16}>
                                <DatePicker locale={locale} placeholder="请选择日期"  defaultValue={moment(new Date(), dateFormat)} format={dateFormat} nChange={this.onChangeDate} style={{width: 200}}/>
                            </Col>
                        </Row>
                        <Row className="row-item">
                            <Col span={8}>单选</Col>
                            <Col span={16}>
                                <Radio.Group onChange={this.onRadioChange} value={this.state.radioVal}>
                                    <Radio value={1}>A</Radio>
                                    <Radio value={2}>B</Radio>
                                    <Radio value={3}>C</Radio>
                                    <Radio value={4}>D</Radio>
                                </Radio.Group>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}

export default Detail;